import React, {memo, useEffect, useLayoutEffect, useState} from 'react';

/**
 * 1. useEffect 会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新
 * 2. useLayoutEffect 会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新
 */
const App = memo(() => {
  const [count, setCount] = useState(100);

  // useEffect(() => {
  //   //3.useEffect执行
  //   console.log("useEffect")
  //   //0会先渲染到界面上面，然后useEffect执行，修改count=888， 屏幕闪烁, 瞬间由数字0变为888
  //   if (count === 0 ) {
  //     setCount(888);
  //   }
  // })

  useLayoutEffect(() => {
    //2.useLayoutEffect执行
    console.log("useLayoutEffect")
    //在0渲染到界面上之前, useLayoutEffect执行, 修改count=888，屏幕上不会出现0
    if (count === 0) {
      setCount(888)
    }
  })

  //1.render执行
  console.log("App render")

  return (
      <div>
        <h2>当前计数:{count}</h2>
        <button onClick={() => setCount(0)}>归零</button>
      </div>
  );
});

export default App;